<template>
  <div v-if="data !== undefined" id="index">
    <el-tabs v-model="listQuery.showType" @tab-click="initData">
      <el-tab-pane name="0" label="所有订单" />
      <el-tab-pane name="1" label="待付款" />
      <el-tab-pane name="2" label="待发货" />
      <el-tab-pane name="3" label="待收货" />
      <el-tab-pane name="4" label="待评价" />
    </el-tabs>
    <el-row>
      <el-col :span="24">
        <el-row v-for="(item,index) in (data.list || [])" :key="index" style="height:100%; background-color: #fcfcfc;border: 1px solid #cccccc;padding: 15px;margin-top: 20px;">
          <el-col :span="1" class="row-line-text"><el-checkbox v-model="item.checked" /></el-col>
          <el-col :span="3" class="row-line-text">
            {{ item.orderSn }}
          </el-col>
          <el-col :span="3" class="row-line-text">
            {{ item.orderStatusText }}
          </el-col>
          <el-col :span="3" class="row-line-text">
            ￥{{ item.actualPrice }}
          </el-col>
          <el-col :span="11" style="height: 100%;">
            <el-row v-for="(goods,index) in item.goodsList" :key="index" style="height: 100%;">
              <el-col :span="5" style="height: 100%;">
                <el-image style="width: 100%;height: 80px;" fit="cover" :src="goods.picUrl" />
              </el-col>
              <el-col :span="10" :offset="1" style="line-height: 25px;font-size: 12px;">{{ goods.goodsName }}<br>￥{{ goods.price }}<br>数量：{{ goods.number }}</el-col>
            </el-row>
          </el-col>
          <el-col :span="3" class="row-line-text">
            <el-button v-if="item.handleOption.pay" type="text" @click="orderSettlement(item.orderSn)">结算</el-button>
            <el-button v-if="item.handleOption.cancel" type="text" @click="orderCancel(item.id)">取消</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { list, orderSettlement, cancel } from '@/api/webSite/ApiOrder'
export default {
  name: 'Index',
  data() {
    return {
      data: undefined,
      listQuery: {
        page: 1,
        limit: 20,
        showType: 0,
        sort: 'create_time',
        order: 'desc'
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      list(this.listQuery).then(res => {
        this.data = res.data.data
      })
    },
    orderSettlement(orderNo) {
      orderSettlement({ orderNo }).then(res => {
        this.initData()
      })
    },
    orderCancel(orderId) {
      cancel({ orderId }).then(res => {
        this.initData()
      })
    }
  }
}
</script>

<style scoped>
#index {
  padding-top: 20px;
}
.row-line-text {
  height: 100px;
  line-height: 100px;
}
</style>
